<template>
    <div :class="{modal: app.registerFlag}">
        <div class="dialog-box side-card glass" v-show="app.registerFlag">
            <n-input class="mt-10 input" placeholder="邮箱号"
                     v-model:value="registerForm.email"></n-input>
            <div style="display: flex">
                <n-input class="mt-10 input" placeholder="验证码" v-model:value="registerForm.code"></n-input>
                <button class="but mt-10" :disabled="flag" @click="sendCode">
                    {{ timer == 0 ? '发送' : `${timer}s` }}
                </button>
            </div>
            <n-input class="mt-10 input" type="password" show-password-on="click" placeholder="密码"
                     v-model:value="registerForm.password"></n-input>
            <n-button class="mt-10 comm-submit" color="#CC57F3" :loading="loading"
                      @click="handleRegister" :round="true">
                <span class="edge"></span>
                <span class="front">快 快</span>
            </n-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import {getCode, login, register} from "@/api/login";
import {LoginForm} from "@/api/login/types";
import {UserForm} from "@/model";
import useStore from "@/store";
import {setToken} from "@/utils/token";
import {useIntervalFn} from '@vueuse/core';

const {app, user} = useStore();

const data = reactive({
    timer: 0,
    flag: false,
    loading: false,
    registerForm: {
        email: "",
        password: "",
        code: "",
    } as UserForm,
});
const {timer, flag, loading, registerForm} = toRefs(data);
const {pause, resume} = useIntervalFn(() => {
    timer.value--;
    if (timer.value <= 0) {
        // 停止定时器
        pause();
        flag.value = false;
    }
}, 1000, {immediate: false});
const start = (time: number) => {
    flag.value = true;
    timer.value = time;
    // 启动定时器
    resume();
};
const sendCode = () => {
    let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if (!reg.test(registerForm.value.email)) {
        window.$message?.warning("邮箱格式不正确");
        return;
    }
    start(60);
    getCode(registerForm.value.email).then(({data}) => {
        if (data.flag) {
            window.$message?.success("发送成功");
        }
    });
};
const handleRegister = () => {
    if (registerForm.value.code.trim().length != 6) {
        window.$message?.warning("请输入6位验证码");
        return;
    }
    if (registerForm.value.password.trim().length < 6) {
        window.$message?.warning("密码不能少于6位");
        return;
    }
    loading.value = true;
    register(registerForm.value).then(({data}) => {
        if (data.flag) {
            let loginForm: LoginForm = {
                username: registerForm.value.email,
                password: registerForm.value.password,
            }
            login(loginForm).then(({data}) => {
                if (data.flag) {
                    registerForm.value = {
                        email: "",
                        password: "",
                        code: "",
                    }
                    setToken(data.data);
                    user.GetUserInfo();
                    window.$message?.success("登录成功");
                    app.setRegisterFlag(false);
                }
            });
        }
        loading.value = false;
    });
};
</script>

<style scoped>
.but {
    border-radius: 0 0.1rem 0.1rem 0;
}
</style>